
import React, { useCallback, useState, useContext, forwardRef } from 'react'
import CustomizeModal, { CustomizeModalButton, CustomizeModalContext } from "@common/presentational/CustomizeModal";

const CouponStatsContent = props => {
    const { hide, params } = useContext(CustomizeModalContext)
    const { distributed_cnt, got_cnt, use_cnt, use_amount, off_trans_cnt, off_refund_trans_cnt } = params
    return (
        <div className='coupon-stats-modal'>
            <div className='stats-item'>
                <div className='stats-type'>总投放量</div>
                <div className='number'>{distributed_cnt}</div>
            </div>
            <div className='stats-item'>
                <div className='stats-type'>总领取量</div>
                <div className='number'>{got_cnt}</div>
            </div>
            <div className='stats-item'>
                <div className='stats-type'>总使用量</div>
                <div className='number'>{use_cnt}</div>
            </div>
            <div className='stats-item'>
                <div className='stats-type'>用券总订单数</div>
                <div className='number'>{off_trans_cnt}</div>
            </div>
            <div className='stats-item'>
                <div className='stats-type'>券回退订单数</div>
                <div className='number'>{off_refund_trans_cnt}</div>
            </div>
            <div className='stats-item'>
                <div className='stats-type'>用券实际优惠金额</div>
                <div className='number'>{use_amount}</div>
            </div>
        </div>
    )
}

export default forwardRef((props, ref) => (
    <CustomizeModal title="优惠券数据" ref={ref} width={734} >
        <CouponStatsContent {...props} />
    </CustomizeModal>
))